<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .progress{
            width: 500px;
            height: 40px;
            background-color: #f1f1f1;
            border-radius: 4px;
            margin-bottom: 10px;
            position: relative;
        }
        .progress::before {
            /* IE上不支持CSS变量(var)*/
            counter-reset: precent var(--progress); /* 定义一个int类型的变量  值为var()变量*/
           /* 显示变量的时候，如果变量是string类型则可以直接显示，如果是int类型，则需要借用counter函数*/
            content: counter(precent) "%"; /* 拼接字符显示文字，先使用counter函数获得int类型的值，再加上%号，不需要使用+号   counter()函数里的值为  counter-reset 定义的变量*/
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            color: #fff;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 5px;
            width: calc(var(--progress) / 100 * 100%); /* 计算width，利用calc计算属性，以及var() css 变量特性 */
            max-width: 100%;
            border-radius: 4px;
            background-color: #0a90cd;
            transition: width 500ms ease-in-out;
            animation: transitionWidth 500ms ease-in-out;
        }

        /* 在页面首次进入触发动画效果，那只有animation才能做到了,手动将width进行了变化*/
        @keyframes transitionWidth {
            from {
                width: 0;
            }

            to {
                width: calc(var(--progress) / 100 * 100%);
            }
        }
    </style>
</head>
<body>
    <div class="progress" style="--progress:20"></div>  <!-- 定义一个数值型变量 -->
    <div class="progress" style="--progress:50"></div>
    <div class="progress" style="--progress:70"></div>
    <div class="progress" style="--progress:100"></div>
</body>
</html>